<template>
      <!-- 右菜单栏按钮 -->
  <div class="right_menu_open">></div>
  <!-- 右菜单栏 -->
  <div class="right_menu">
    <div class="right_menu_gone">
      <button class="right_menu_gone_button">X</button>
    </div>
    <div class="people_head">
      <img
        class="people_head_img"
        src="../../../assets/ciyuan_image/微信图片_20221128110914.jpg"
        alt=""
      />
    </div>
    <div class="people_head_imgShow">
      <img
        class="people_head_imgBig"
        src="../../../assets/ciyuan_image/微信图片_20221128110914.jpg"
        alt=""
      />
      <div class="people_head_gone">
        <button class="people_head_gone_button">X</button>
      </div>
    </div>
    <div class="people_name">我是张大大</div>
    <div class="right_meun_option">
      <ul class="right_meun_option_list">
        <li class="right_meun_option_one" title="待付款"><i class="iconfont icon-weibiaoti-" ><span class="non-payment_num">0</span></i><p>待付款</p></li>
        <li class="right_meun_option_one" title="待发货"><i class="iconfont icon-gongchang"><span class="not_shipped_num">12</span></i><p>待发货</p></li>
        <li class="right_meun_option_one" title="待收货"><i class="iconfont icon-daishouhuo"><span class="unreceived_num">0</span></i><p>待收货</p></li>
        <li class="right_meun_option_one" title="评价"><i class="iconfont icon-pingjia"><span class="not_rated_num">0</span></i><p>评价</p></li>

      </ul>
    </div>
    <div class="right_maid_option">
      <ul class="right_maid_option_list">
        <li class="right_maid_option_one" title="退款/售后"><i class="iconfont icon-tuihuobaozhang" ><span class="refund_num">0</span></i><p>退款/售后</p></li>
        <li class="right_maid_option_one" title="好友"><i class="iconfont icon-haoyou" ></i><p class="not_num">好友</p></li>
        <li class="right_maid_option_one" title="钱包"><i class="iconfont icon-qianbao" ></i><p class="not_num">钱包</p></li>
        <li class="right_maid_option_one" title="优惠劵"><i class="iconfont icon-9" ></i><p class="not_num">优惠劵</p></li>
        <li class="right_maid_option_one" title="足迹"><i class="iconfont icon-zuji" ></i><p class="not_num">足迹</p></li>
        <li class="right_maid_option_one" title="消息/通知"><i class="iconfont icon-xiaoxi1" ></i><p class="not_num">消息/通知</p></li>
        <li class="right_maid_option_one" title="官方客服"><i class="iconfont icon-rengongkefu" ></i><p class="not_num">官方客服</p></li>
        <li class="right_maid_option_one" title="活动"><i class="iconfont icon-huodong1" ></i><p class="not_num">活动</p></li>
      </ul>
    </div>
  </div>
</template>

<script>


import $ from "jquery";

export default {
  name: "right_menu",
  props: {
    msg: String,
  },

};
// import $ from "jquery";
//right_menu
$(function () {
  $(".right_menu_gone_button").on("click", function () {
    $(".right_menu_open").css({
      transform: "rotate(180deg) translateX(0px)",
      transition: "3s",
    });
    $(".right_menu").css({
      // display: "none",
      transform: "translateX(400px)",
      transition: "1s",
    });
  });
  $(".right_menu_open").on("click", function () {
    $(".right_menu_open").css({
      transform: "rotate(180deg) translateX(-40px)",
      transition: "1s",
    });
    $(".right_menu").css({
      // display: "none",
      transform: "translateX(0px)",
      transition: "3s",
    });
  });
  $(".right_meun_option_one").on("mouseout", function () {
    $(".right_meun_option_one").css({
      transition: "1s",
    });
  });
  $(".right_meun_option").on("mouseout", function () {
    $(".right_meun_option").css({
      transition: "1s",
    });
  });
  $(".right_maid_option_one").on("mouseout", function () {
    $(".right_maid_option_one").css({
      transition: "1s",
    });
  });
  $(".right_maid_option").on("mouseout", function () {
    $(".right_maid_option").css({
      transition: "1s",
    });
  });
  $(".people_head_img").on("click", function () {
    $(".people_head_imgShow").css({
      display: "block",
    });
  });
  $(".people_head_gone").on("click", function () {
    $(".people_head_imgShow").css({
      display: "none",
    });
  });
})
</script>
